<template>
  <div class="textarea-field-render" :style="{ textAlign: fieldData.alignment || 'left', fontSize: getFontSize() }">
    <div v-if="fieldData.fieldName" class="field-label">{{ fieldData.fieldName }}</div>
    <div class="textarea-content">
      <template v-if="fieldData.value">
        <div class="content-text">{{ fieldData.value }}</div>
      </template>
      <template v-else>
        <div class="content-placeholder">
          <div 
            v-for="row in (fieldData.rows ?? 3)" 
            :key="row"
            class="placeholder-line"
          >
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  fieldData: {
    type: Object,
    required: true,
    default: () => ({
      value: '',
      fieldName: '',
      rows: 3,
      alignment: 'indent-0',
      prefixSymbol: '',
      isBold: false
    })
  }
})

// 字体映射
const getFontSize = () => {
  const map = { '小二': '18pt', '小四': '12pt', '五号': '10.5pt', '小五': '9pt' }
  return map[props.fieldData.fontSize] || '10.5pt'
}
</script>

<style lang="scss" scoped>
.textarea-field-render {
  font-family: '宋体', SimSun, serif;
  line-height: 1.5;
  width: 100%;
  
  .field-label {
    margin-bottom: 8px;
    font-weight: bold;
  }
  
  .textarea-content {
    width: 100%;
    
    .content-text {
      white-space: pre-wrap;
      word-break: break-word;
      padding: 8px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      background-color: #f9f9f9;
      min-height: 60px;
      width: 100%;
      box-sizing: border-box;
    }
    
    .content-placeholder {
      width: 100%;
      
      .placeholder-line {
        width: 100%;
        height: 24px;
        line-height: 24px;
        margin-bottom: 4px;
        border-bottom: 1px solid #000;
        box-sizing: border-box;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}
</style> 